.NET MAUI Shell 浮出控件

浏览示例

.NET 多平台应用 UI (.NET MAUI) Shell 提供的导航体验基于浮出控件和选项卡。 浮出控件是 Shell 应用的可选根菜单，可完全自定义。 可以通过图标或从屏幕的一侧轻扫来访问它。 浮出控件由可选标头、浮出控件项、可选菜单项和可选页脚组成：

可以将一个或多个浮出控件项添加到浮出控件，每个浮出控件项都由 FlyoutItem 对象表示。 每个 FlyoutItem 对象应是子类化的 Shell 对象的子对象。 当浮出控件标头不存在时，浮出控件项会显示在浮出控件顶部。

以下示例创建包含两个浮出控件项的浮出控件：

FlyoutItem.Title 属性，类型为 string，可定义浮出控件项的标题。 FlyoutItem.Icon 属性，类型为 ImageSource，可定义浮出控件项的图标：

在此示例中，只能通过浮出控件项访问每个 ShellContent，而不能通过选项卡进行访问。 这是因为默认情况下，仅当浮出控件项包含多个选项卡时才会显示选项卡。

重要

在 Shell 应用中，页面是按需创建的，以响应导航。 这是通过使用 DataTemplate 标记扩展将每个 对象的 ShellContentContentTemplate 属性设置为 ContentPage 对象来实现的。

Shell 具有隐式转换运算符，可以简化 Shell 的视觉层次结构，而无需在可视化树中引入额外的视图。 这是可能的，因为子类 Shell 对象只能包含 FlyoutItem 对象或 TabBar 对象，它们只能包含 Tab 对象，而此对象只能包含 ShellContent 对象。 这些隐式转换运算符可用于从前面的示例中删除 FlyoutItem 和 Tab 对象：

此隐式转换自动将每个 ShellContent 对象包装在 Tab 对象中，后者包装在 FlyoutItem 对象中。

注意

子类化的 Shell 对象中的所有 FlyoutItem 对象都会自动添加到 Shell.FlyoutItems 集合，该集合定义将在浮出控件中显示的项的列表。

FlyoutItem.FlyoutDisplayOptions 属性配置浮出控件项及其子级在浮出控件中的显示方式。 应将此属性设置为 FlyoutDisplayOptions 枚举成员：

通过将 属性设置为 AsMultipleItems，可以显示 FlyoutItem.FlyoutDisplayOptionsFlyoutItem 中每个 Tab 对象的浮出控件项：

在此示例中，将为 Tab 对象（FlyoutItem 对象的子对象）以及 ShellContent 对象（FlyoutItem 对象的子对象）创建浮出控件项。 发生这种情况是因为作为 FlyoutItem 对象子对象的每个 ShellContent 对象自动包装在 Tab 对象中。 此外，将为最终的 ShellContent 对象创建浮出控件项，该对象自动包装在 Tab 对象中，然后包装在 FlyoutItem 对象中。

注意

当 FlyoutItem 包含多个 ShellContent 对象时，将显示选项卡。

这将生成以下浮出控件项：

将 Shell.ItemTemplate 附加属性设置为 DataTemplate 可自定义每个 FlyoutItem 的外观：

此示例以斜体显示每个 FlyoutItem 对象的标题：

Shell.ItemTemplate 是一个附加属性，因此可将不同的模板附加到特定的 FlyoutItem 对象。

注意

Shell 向 ItemTemplate 的 BindingContext 提供 Title 和 FlyoutIcon 属性。

此外，Shell 还包括三个可自动应用于 FlyoutItem 对象的样式类。 有关详细信息，请参阅样式 FlyoutItem 和 MenuItem 对象。

用于每个 FlyoutItem 的默认 DataTemplate 如下所示：

此模板可用作对现有浮出控件布局进行更改的基础，还显示了为浮出控件项实现的视觉状态。

此外，Grid、Image 和 Label 元素都具有 x:Name 值，因此它们可作为可视状态管理器的目标。 有关详细信息，请参阅设置多个元素的状态。

注意

还可将同一模板用于 MenuItem 对象。

浮出项表示浮出控件内容，可以选择将其替换为你自己的内容，方法是将 Shell.FlyoutContent 可绑定属性设置为 object：

在此示例中，将浮出控件内容替换为 CollectionView，它显示了 FlyoutItems 集合中每个项的标题。

注意

Shell 类中的 FlyoutItems 属性是浮出项的只读集合。

此外，可以通过将 Shell.FlyoutContentTemplate 可绑定属性设置为 DataTemplate 来定义浮出控件内容：

重要

可以选择在浮出控件内容上方显示浮出控件标头，还可以选择在浮出控件内容下显示浮出控件页脚。 如果浮出控件内容可滚动，Shell 将尝试遵循浮出控件标头的滚动行为。

菜单项可以选择性地添加到浮出控件，每个菜单项都由 MenuItem 对象表示。 浮出控件上的 MenuItem 对象的位置依赖于它们在 Shell 视觉层次结构中的声明顺序。 因此，FlyoutItem 对象之前声明的任何 MenuItem 对象将于 FlyoutItem 对象之前显示在浮出控件中，FlyoutItem 对象之后声明的任何 MenuItem 对象将于 FlyoutItem 对象之后显示在浮出控件中。

MenuItem 类具有 Clicked 事件和 Command 属性。 因此，MenuItem 对象支持以下场景：执行一个操作以响应被点击的 MenuItem。

可将 MenuItem 对象添加到浮出控件，如下面的示例所示：

此示例在所有浮出控件项下方，向浮出控件添加一个 MenuItem 对象：

MenuItem 对象执行名为 HelpCommand 的 ICommand，这将在系统 Web 浏览器中打开由 CommandParameter 属性指定的 URL。

注意

每个 MenuItem 的 BindingContext 都继承自子类化的 Shell 对象。

通过将 Shell.MenuItemTemplate 附加属性设置为 DataTemplate 可自定义每个 MenuItem 的外观：

此示例会将 DataTemplate 附加到每个 MenuItem 对象，以斜体显示 MenuItem 对象的标题：

Shell.MenuItemTemplate 是一个附加属性，因此可将不同的模板附加到特定的 MenuItem 对象。

注意

Shell 向 MenuItemTemplate 的 提供 Text 和 BindingContextIconImageSource 属性。 也可使用 Title 代替 Text 并使用 Icon 代替 IconImageSource，这样便可对菜单项和浮出控件项重复使用相同的模板。

FlyoutItem 对象的默认模板还可用于 MenuItem 对象。 有关详细信息，请参阅 FlyoutItem 的默认模板。

Shell 包括三个可自动应用于 FlyoutItem 和 MenuItem 对象的样式类。 样式类名为 FlyoutItemLabelStyle、FlyoutItemImageStyle 和 FlyoutItemLayoutStyle。

以下 XAML 演示一个示例，该示例定义了这些样式类的样式：

这些样式可自动应用于 FlyoutItem 和 MenuItem 对象，而无需将其 StyleClass 属性设置为样式类名。

此外，还可以定义自定义样式类并将其应用于 FlyoutItem 和 MenuItem 对象。 有关样式类的详细信息，请参阅 样式类。

浮出控件标头是根据需要显示在浮出控件顶部的内容，使用可通过 Shell.FlyoutHeader 可绑定属性设置的 object 定义其外观：

FlyoutHeader 类型如以下示例所示：

这将生成以下浮出控件标头：

还可以通过将 Shell.FlyoutHeaderTemplate 可绑定属性设置为 DataTemplate 的方式来定义浮出控件标头的外观：

默认情况下，在浮出控件中，浮出控件标头是固定的，在有足够的项时会滚动其下方的内容。 但是，将 Shell.FlyoutHeaderBehavior 可绑定属性设置为 FlyoutHeaderBehavior 枚举成员之一可以更改此行为：

以下示例演示如何在用户滚动时折叠浮出控件标头：

浮出控件页脚是根据需要显示在浮出控件底部的内容，使用可通过 Shell.FlyoutFooter 可绑定属性设置的 object 定义其外观：

FlyoutFooter 类型如以下示例所示：

重要

前面的 XAML 示例定义了名为 sys的新 XAML 命名空间： xmlns:sys="clr-namespace:System;assembly=netstandard"。 此 XAML 命名空间映射到 sys .NET System 命名空间。 通过映射，可以在 XAML 中使用该命名空间中定义的 .NET 类型，例如 DateTime。 有关详细信息，请参阅 XAML 命名空间。

这将生成以下浮出控件页脚：

还可以通过将 Shell.FlyoutFooterTemplate 属性设置为 DataTemplate 的方式来定义浮出控件页脚的外观：

浮出控件页脚固定在浮出控件的底部，可以是任意高度。 此外，页脚永远不会遮挡任何菜单项。

可以通过将 Shell.FlyoutWidth" 和 Shell.FlyoutHeight 附加属性设置为 double 值来自定义浮出控件的宽度和高度：

这样做可以启用多种方案，例如在整个屏幕上展开浮出控件，或降低浮出控件的高度使其不遮挡选项卡栏。

默认情况下，Shell 应用有一个汉堡图标，按下该图标会打开浮出控件。 可以通过设置类型为 ImageSource 的 Shell.FlyoutIcon 可绑定属性来将此图标更改为相应的图标：

可以通过 Shell.FlyoutBackgroundColor 可绑定属性设置浮出控件的背景色：

注意

还可以从级联样式表 (CSS) 设置 Shell.FlyoutBackgroundColor。 有关详细信息，请参阅 .NET MAUI Shell 特定属性。

也可以通过将 Shell.FlyoutBackground 可绑定属性设置为 Brush 来指定浮出控件的背景：

在此示例中，浮出控件背景是用浅灰色 SolidColorBrush 绘制的。

以下示例演示如何将浮出控件背景设置为 LinearGradientBrush：

有关画笔的详细信息，请参阅 .NET MAUI 画笔。

浮出控件可以有一个可选背景图像，该图像显示在浮出控件标头的下方，并且位于任何浮出控件项、菜单项和浮出控件页脚的后面。 可以通过将类型为 ImageSource 的 FlyoutBackgroundImage 可绑定属性设置为文件、嵌入的资源、URI 或流来指定背景图像。

可以通过将类型 Aspect 的 FlyoutBackgroundImageAspect 可绑定属性设置为 Aspect 枚举成员之一来配置背景图像的纵横比：

以下示例演示如何设置这些属性：

这将使背景图像显示在浮出控件中，位于浮出控件标头下方：

通过将 Shell.FlyoutBackdrop 附加属性设置为 Brush，可以指定浮出控件的背景（即浮出控件叠加层的外观）：

在此示例中，浮出控件背景是用银色 SolidColorBrush 绘制的。

重要

FlyoutBackdrop附加属性可以在任何 Shell 元素上设置，但仅当在 、 FlyoutItem或 TabBar 对象上Shell设置时才会应用该属性。

以下示例演示了如何将浮出控件背景设置为 LinearGradientBrush：

有关画笔的详细信息，请参阅 .NET MAUI 画笔。

访问浮出控件的方式有两种：按汉堡图标或从屏幕一侧轻扫。 但是，将 Shell.FlyoutBehavior 附加属性设置为 FlyoutBehavior 枚举成员之一可以更改此行为：

以下示例演示如何禁用浮出控件：

注意

可以在 Shell、FlyoutItem、ShellContent 和页面对象上设置 FlyoutBehavior 附加属性以替代默认浮出控件行为。

默认情况下，当浮出控件中容纳不下浮出控件项时，可以垂直滚动浮出控件。 将 Shell.FlyoutVerticalScrollMode 可绑定属性设置为 ScrollMode 枚举成员之一可以更改此行为：

以下示例演示如何禁用垂直滚动：

首次运行使用浮出控件的 Shell 应用时，属性Shell.CurrentItem将设置为子类化Shell对象中的第一个FlyoutItem对象。 但是，此属性可以设置为另一个 FlyoutItem，如以下示例所示：

此示例将 CurrentItem 属性设置为名为 的 aboutItemShellContent 对象，这将导致选中并显示该对象。 在此示例中，隐式转换用于将 ShellContent 对象包装在 Tab 对象中，Tab 对象包装在 FlyoutItem 对象中。

假设 ShellContent 名为 aboutItem，则等效的 C# 代码为：

在此示例中，CurrentItem 属性是在设为子类的 Shell 类中设置的。 或者，可通过 Shell.Current 静态属性在任何类中设置 CurrentItem 属性：

注意

应用可能会进入选择浮出控件项不是有效操作的状态。 在这种情况下，可以通过将 FlyoutItem 的 IsEnabled 属性设置为 false 来对其进行禁用。 这会阻止用户选择浮出控件项。

浮出项在浮出控件中默认可见。 但是，可以使用 FlyoutItemIsVisible 属性将项隐藏在浮出控件中，并使用 IsVisible 属性将其从浮出控件中删除：

以下示例演示如何在浮出控件中隐藏项：

注意

还有一个Shell.FlyoutItemIsVisible附加属性，可以在 、MenuItem、 Tab和 ShellContent 对象上FlyoutItem设置。

可以通过将 Shell.FlyoutIsPresented 可绑定属性设置为指示浮出控件当前是否处于打开状态的 boolean 值来以编程方式打开和关闭浮出控件：

也可以在代码中执行此操作：